<!-- /*
 * @Author: 俞明月
 * @Date:   2022-01-30
 * @Last Modified by:   俞明月
 * @Last Modified time: 2022-01-30
 */ -->
<template>
	<div class="ui-mode-container ui-mode-box flex-col">
        <div class="ui-header-item gradient">
            <div class="ui-header-arraw prev" @click="handleHistory" @touchstart.stop>
                <i class="iconfont icon iconjiantou-zuo-cuxiantiao"></i>
            </div>
            <div class="ui-header-title">领券中心</div>
            <div class="ui-header-arraw next flex-row align-center" @touchstart.stop @click="handleHome">
                <i class="iconfont icon iconi-home"></i>
            </div>
        </div>
        <div class="ui-mode-content flex1" ref="scrollPage" v-if="pageStatus">
            <div class="relative" v-if="user_quan_list&&user_quan_list.length">
                <div class="coupon-wrap">
                    <div class="coupon-item"
                        :key="`coupon-${i}`"
                        v-for="(item,i) in user_quan_list">
                        <div class="coupon-info flex-row align-center-row">
                            <div class="coupon-price flex-col align-center-row">
                                <div class="coupon-minus"><span>¥</span>{{item.value_4_use_rule}}</div>
                                <div>满{{item.key_4_use_rule}}元可用</div>
                            </div>
                            <div class="coupon-content flex-row align-center-row align-between-row">
                                <div class="coupon-rules">
                                    <div class="coupon-name">
                                        <p>满{{item.key_4_use_rule}}元减{{item.value_4_use_rule}}元</p>
                                        <p>仅可购买店铺内部分产品</p>
                                    </div>
                                    <div class="coupon-time">{{item.time_begin.replace(/-/g,".").split(' ')[0]}} 至 {{item.time_end.replace(/-/g,".").split(' ')[0]}} 可用</div>
                                </div>
                                <div v-if="item.isGet" class="coupon-get disabled">已领</div>
                                <div v-else class="coupon-get" @touchstart.stop @click="getQuan(item,i)">领取</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="isScrolling" class="flex1 flex-row align-center scrolling-content relative">
                    <span class="icon">
                        <bsx-loading master-background="rgba(0,0,0,0)" box-background="rgba(0,0,0,0)" :size="35" :show-text="false"></bsx-loading>
                    </span>
                    <span class="text">努力加载中...</span>
                </div>
                <div v-else-if="isLoadEnded" class="flex1 flex-row align-center scrolling-content relative">已经到底啦~~</div>
            </div>
        </div>
    </div>
</template>
<script>
import mixinCommon from '@/views/content/mixins/common';
import mixinRequest from '@/views/content/mixins/request';
export default {
    name: 'my/couponCenter',
    data() {
        return {
            public_agent_info:{},
            public_user_info:{},
            user_quan_list:[],
        }
    },
    mixins:[
        mixinCommon,
        mixinRequest,
    ],
    computed:{
    },
    watch:{
        resourceLoaded:{
            handler(flag){
                flag&&this.$nextTick(this.init); 
            },
            immediate:true
        }
    },
    created(){
    },
    mounted(){
    },
    methods:{
        // 初始化
        init(){
            this.getListInfo({
                flag:true,
                page:0
            });
        },
        // 获取列表数据
		getListInfo({flag,page,callback}){
            this.getPageInfo({
                name:'common.couponRuleList',
                param:{
                    invoke_method: "load_score_config_4_user",
                    id_public_agent_info_list_like:this.$store.state.global.userInfo.id_public_agent_info,
                    pre_cmd_para_show_score_list:true,
                    type_rule_4_score:109,
                    is_online:0
                }
            }).then(({result,response})=>{
                console.log(result)
                if(result.public_score_list&&result.public_score_list.length){
                    for(var i=0; i<result.public_score_list.length; i++){
                        if(result.public_score_list[i].save_data1&&result.public_score_list[i].save_data1[0]&&result.public_score_list[i].save_data1[0].id_public_score_record){
                            result.public_score_list[i].isGet=true;
                        }else{
                            result.public_score_list[i].isGet=false;
                        }
                    }
                    this.user_quan_list.push(...result.public_score_list);
                    this.currentPage=page;
                    this.isLoadEnded=true;
                    callback&&callback();
                }else{
                    if(flag){
                        this.showResult('没有查询到相关数据');
                    }else{
                        this.showToast('没有查询到相关数据',false);
                    };
                    callback&&callback();
                };
            }).catch(({msg})=>{
                this.showMessage(msg);
            });
		},
        getQuan(item,index){
            this.getting=this.$$loading({
                text:'优惠券领取中，请稍后...'
            });
            this.$http.post({
                name:'common.coupon',
                data:{
                    invoke_method:'get_quan_from_others_share',
                    id_public_rule_4_score:item.id_public_rule_4_score
                },
                loading:{
                    enabled:false 
                }
            }).then(({result,response})=>{
                this.user_quan_list[index].isGet=true;
                this.getting&&this.getting.close();
                this.showToast('领取成功',true);
            }).catch(({msg})=>{
                this.getting&&this.getting.close();
                this.showMessage(msg,false);
            });
        },
        /*
         * 请求失败刷新
         */
        handleRefresh(){
            this.init();
        }
    },
    components:{
    },
    beforeDestroy(){
    }
}
</script>
<style lang="less" scoped>
</style>